import { BasicTable, useTable, FormSchema, BasicColumn } from "@/components/Table";
import { Tag } from "antd";
import { useTranslation } from "react-i18next";
import Toolbar from "@/components/ViewComponents/Toolbar";
import { treatmentPhmPage } from "@/api/MedicalExamination";
import { TimeDate } from "@/utils/util";
import moment from "moment";
const index = () => {
	const { t } = useTranslation();
	const searchFormSchema: FormSchema[] = [
		// {
		// 	label: t("kevin_ui.utilities"),
		// 	field: "utilities",
		// 	component: "Select",
		// 	componentProps: {
		// 		options: [
		// 			{
		// 				label: "Inpatient",
		// 				value: "Inpatient"
		// 			},
		// 			{
		// 				label: "Outpatient",
		// 				value: "Outpatient"
		// 			},
		// 			{
		// 				label: "Clinic",
		// 				value: "Clinic"
		// 			},
		// 			{
		// 				label: "Emergency(observation room)",
		// 				value: "Emergency(observation room)"
		// 			},
		// 			{
		// 				label: "Reception",
		// 				value: "Reception"
		// 			}
		// 		]
		// 	}
		// },
		// {
		// 	label: t("kevin_ui.data"),
		// 	field: "username",
		// 	component: "Select",
		// 	componentProps: {
		// 		options: [
		// 			{ label: "Drug", value: "Drug" },
		// 			{ label: "Fee", value: "Fee" }
		// 		]
		// 	}
		// },
		{
			label: t("kevin_ui.patient_id"),
			field: "patientId",
			component: "Input"
		},
		{
			label: t("kevin_ui.full_name"),
			field: "fullName",
			component: "Input"
		},
		{
			label: t("kevin_ui.birth_year"),
			field: "birthday",
			component: "Input"
		},
		// {
		// 	label: "Address",
		// 	field: "address",
		// 	component: "Input"
		// },
		// {
		// 	label: t("kevin_ui.admission_date"),
		// 	field: "admissionDate",
		// 	component: "DatePicker"
		// },
		{
			label: t("felix_ui.dt_date"),
			field: "rxDtime",
			component: "RangePicker",
			componentProps: {
				showTime: {
					defaultValue: [moment("00:00:00", "DD-MM-YYYY"), moment("23:59:59", "DD-MM-YYYY")]
				}
			}
		},
		{
			label: t("felix_ui.deptId"),
			field: "deptId",
			component: "Input"
		}
		// {
		// 	label: "By",
		// 	field: "by",
		// 	component: "Select",
		// 	componentProps: {
		// 		options: [
		// 			{
		// 				label: "All",
		// 				value: "All"
		// 			},
		// 			{
		// 				label: "Detail",
		// 				value: "Detail"
		// 			}
		// 		]
		// 	}
		// },
		// {
		// 	label: t("kevin_ui.old_Patient_type"),
		// 	field: "oldPatientType",
		// 	component: "Input"
		// },
		// {
		// 	label: t("kevin_ui.new_patient_type"),
		// 	field: "newPatientType",
		// 	component: "Input"
		// },
		// {
		// 	label: t("kevin_ui.find_form"),
		// 	field: "findForm",
		// 	component: "Input"
		// }
	];

	const columns: BasicColumn[] = [
		{
			title: t("felix_ui.full_name"),
			dataIndex: "fullName"
		},
		{
			title: t("felix_ui.gender"),
			dataIndex: "gender"
		},
		{
			title: t("flandre_ui.symptoms"),
			dataIndex: "patSymptom"
		},
		{
			title: t("felix_ui.type"),
			dataIndex: "rxType",
			render: (text, record) => {
				return record.rxType == 0 ? (
					<Tag color="success">{t("felix_ui.firstVisit")}</Tag>
				) : (
					<Tag color="error">{t("felix_ui.returnVisit")}</Tag>
				);
			}
		},
		{
			title: t("felix_ui.deptId"),
			dataIndex: "deptId"
		},
		{
			title: t("felix_ui.doctor"),
			dataIndex: "doctorName"
		},
		{
			title: t("felix_ui.diagnosisDate"),
			dataIndex: "rxDtime",
			render: text => <span>{text && TimeDate(text)}</span>
		},
		{
			title: t("felix_ui.age"),
			dataIndex: "age"
		},
		{
			title: t("felix_ui.drugName"),
			dataIndex: "drugName"
		},
		{
			title: t("felix_ui.sideEffects"),
			dataIndex: "sideEffects"
		},
		{
			title: t("felix_ui.selfPayRatio"),
			dataIndex: "selfPayRatio"
		},
		{
			title: t("felix_ui.takingAdv"),
			dataIndex: "takingAdv"
		}
	];
	let util = async () => {
		let arr: any = [];
		await treatmentPhmPage({}).then(res => {
			arr = res.list.map((item: any) => {
				return {
					...item,
					...item.diagnosis,
					...item.patients
				};
			});
		});
		console.log("arr", arr);
		return arr;
	};
	const [registerTable] = useTable({
		api: util,
		columns,
		formConfig: {
			labelWidth: 120,
			schemas: searchFormSchema,
			showActionButtonGroup: true,
			showAdvancedButton: false,
			baseColProps: { span: 6 }
		},
		useSearchForm: true
	});

	return (
		<div className="page">
			<div className="page-content block">
				<BasicTable register={registerTable}></BasicTable>
			</div>
			<Toolbar btnList={[{ key: "end", disabled: true }]} />
		</div>
	);
};
export default index;
